<template>
  <div 
    class="integrate button-unselected"
    @click="handleClick"
    :class="classNames(item.disabled)"
    >
    <span>{{item.name}}</span>
    <div class="right-top" v-show="selected"></div>
    <div class="right-top-text" v-show="selected"></div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
export default {
  props: {
    item: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      selected: false
    } 
  },
  methods: {
    handleClick() {
      this.selected = !this.selected
      this.$emit('click', {id: this.item.id, active: this.selected})
    },
    classNames(disabled) {
      let classList = []
      if (disabled) {
        classList.push('disabled')
      }
      if (this.selected) {
        classList.push('number-box-select-red')
      }
      return classList.join(' ')
    },
    ...mapMutations('lottery', {
      setCurrentComponent: 'SET_CURRENT_COMPONENT'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getCurrentComponent'])
  }
}
</script>
<style lang="stylus" scoped>
 @import "~@/assets/styles/variables.styl"
  .integrate 
    line-height 26px 
    padding 0 10px
    position relative 
    border-radius 3px
    cursor pointer
    &.disabled 
      color: #ccc
      pointer-events: none
    .right-top 
      position absolute 
      right 0 
      top 0
      width 0 
      height 0 
      border-top 18px solid $color-theme-red 
      border-left 18px solid transparent
    .right-top-text 
      width 8px 
      height 4px 
      border-left 1px solid #fff
      border-bottom 1px solid #fff
      transform rotate(-45deg)
      position absolute 
      right 2px
      top 1px
</style>